<template>
  <!-- #ifdef APP-NVUE -->
  <cell>
    <!-- #endif -->

    <view
      :class="{ 'uni-list-item--disabled': disabled }"
      :hover-class="(!clickable && !link) || disabled || showSwitch ? '' : 'uni-list-item--hover'"
      class="uni-list-item" @click="onClick">
      <view v-if="!isFirstChild" class="border--left" :class="{ 'uni-list--border': border }" />
      <view
        class="uni-list-item__container"
        :class="{ 'container--right': showArrow || link, 'flex--direction': direction === 'column' }">
        <slot name="header">
          <view class="uni-list-item__header">
            <view v-if="thumb" class="uni-list-item__icon">
              <image :src="thumb" class="uni-list-item__icon-img" :class="['uni-list--' + thumbSize]" />
            </view>
            <view v-else-if="showExtraIcon" class="uni-list-item__icon">
              <uni-icons :color="extraIcon.color" :size="extraIcon.size" :type="extraIcon.type" />
            </view>
          </view>
        </slot>
        <slot name="body">
          <view
            class="uni-list-item__content"
            :class="{ 'uni-list-item__content--center': thumb || showExtraIcon || showBadge || showSwitch }">
            <text
              v-if="title" class="uni-list-item__content-title"
              :class="[ellipsis !== 0 && ellipsis <= 2 ? 'uni-ellipsis-' + ellipsis : '']">
              {{ title }}
            </text>
            <text v-if="note" class="uni-list-item__content-note">
              {{ note }}
            </text>
          </view>
        </slot>
        <slot name="footer">
          <view
            v-if="rightText || showBadge || showSwitch" class="uni-list-item__extra"
            :class="{ 'flex--justify': direction === 'column' }">
            <text v-if="rightText" class="uni-list-item__extra-text">
              {{ rightText }}
            </text>
            <uni-badge v-if="showBadge" :type="badgeType" :text="badgeText" :custom-style="badgeStyle" />
            <switch
              v-if="showSwitch" :disabled="disabled" :checked="switchChecked"
              @change="onSwitchChange" />
          </view>
        </slot>
      </view>
      <uni-icons v-if="showArrow || link" :size="16" class="uni-icon-wrapper" color="#bbb" type="arrowright" />
    </view>
    <!-- #ifdef APP-NVUE -->
  </cell>
  <!-- #endif -->
</template>

<script>
	/**
	 * ListItem 列表子组件
	 * @description 列表子组件
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=24
	 * @property {String} 	title 							标题
	 * @property {String} 	note 							描述
	 * @property {String} 	thumb 							左侧缩略图，若thumb有值，则不会显示扩展图标
	 * @property {String}  	thumbSize = [lg|base|sm]		略缩图大小
	 * 	@value 	 lg			大图
	 * 	@value 	 base		一般
	 * 	@value 	 sm			小图
	 * @property {String} 	badgeText						数字角标内容
	 * @property {String} 	badgeType 						数字角标类型，参考[uni-icons](https://ext.dcloud.net.cn/plugin?id=21)
	 * @property {Object}   badgeStyle           数字角标样式
	 * @property {String} 	rightText 						右侧文字内容
	 * @property {Boolean} 	disabled = [true|false]			是否禁用
	 * @property {Boolean} 	clickable = [true|false] 		是否开启点击反馈
	 * @property {String} 	link = [navigateTo|redirectTo|reLaunch|switchTab] 是否展示右侧箭头并开启点击反馈
	 *  @value 	navigateTo 	同 uni.navigateTo()
	 * 	@value redirectTo 	同 uni.redirectTo()
	 * 	@value reLaunch   	同 uni.reLaunch()
	 * 	@value switchTab  	同 uni.switchTab()
	 * @property {String | PageURIString} 	to  			跳转目标页面
	 * @property {Boolean} 	showBadge = [true|false] 		是否显示数字角标
	 * @property {Boolean} 	showSwitch = [true|false] 		是否显示Switch
	 * @property {Boolean} 	switchChecked = [true|false] 	Switch是否被选中
	 * @property {Boolean} 	showExtraIcon = [true|false] 	左侧是否显示扩展图标
	 * @property {Object} 	extraIcon 						扩展图标参数，格式为 {color: '#4cd964',size: '22',type: 'spinner'}
	 * @property {String} 	direction = [row|column]		排版方向
	 * @value row 			水平排列
	 * @value column 		垂直排列
	 * @event {Function} 	click 							点击 uniListItem 触发事件
	 * @event {Function} 	switchChange 					点击切换 Switch 时触发
	 */
  export default {
    name: 'UniListItem',
    props: {
      direction: {
        type: String,
        default: 'row'
      },
      title: {
        type: String,
        default: ''
      },
      note: {
        type: String,
        default: ''
      },
      ellipsis: {
        type: [Number, String],
        default: 0
      },
      disabled: {
        type: [Boolean, String],
        default: false
      },
      clickable: {
        type: Boolean,
        default: false
      },
      showArrow: {
        type: [Boolean, String],
        default: false
      },
      link: {
        type: [Boolean, String],
        default: false
      },
      to: {
        type: String,
        default: ''
      },
      showBadge: {
        type: [Boolean, String],
        default: false
      },
      showSwitch: {
        type: [Boolean, String],
        default: false
      },
      switchChecked: {
        type: [Boolean, String],
        default: false
      },
      badgeText: {
        type: String,
        default: ''
      },
      badgeType: {
        type: String,
        default: 'success'
      },
      badgeStyle: {
        type: Object,
        default() {
          return {}
        }
      },
      rightText: {
        type: String,
        default: ''
      },
      thumb: {
        type: String,
        default: ''
      },
      thumbSize: {
        type: String,
        default: 'base'
      },
      showExtraIcon: {
        type: [Boolean, String],
        default: false
      },
      extraIcon: {
        type: Object,
        default() {
          return {
            type: '',
            color: '#000000',
            size: 20
          };
        }
      },
      border: {
        type: Boolean,
        default: true
      }
    },
    emits: ['click', 'switchChange'],
    // inject: ['list'],
    data() {
      return {
        isFirstChild: false
      };
    },
    mounted() {
      this.list = this.getForm()
      // 判断是否存在 uni-list 组件
      if (this.list) {
        if (!this.list.firstChildAppend) {
          this.list.firstChildAppend = true;
          this.isFirstChild = true;
        }
      }
    },
    methods: {
      /**
       * 获取父元素实例
       */
      getForm(name = 'uniList') {
        let parent = this.$parent;
        let parentName = parent.$options.name;
        while (parentName !== name) {
          parent = parent.$parent;
          if (!parent) return false
          parentName = parent.$options.name;
        }
        return parent;
      },
      onClick() {
        if (this.to !== '') {
          this.openPage();
          return;
        }
        if (this.clickable || this.link) {
          this.$emit('click', {
            data: {}
          });
        }
      },
      onSwitchChange(e) {
        this.$emit('switchChange', e.detail);
      },
      openPage() {
        if (['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'].indexOf(this.link) !== -1) {
          this.pageApi(this.link);
        } else {
          this.pageApi('navigateTo');
        }
      },
      pageApi(api) {
        let callback = {
          url: this.to,
          success: res => {
            this.$emit('click', {
              data: res
            });
          },
          fail: err => {
            this.$emit('click', {
              data: err
            });
          }
        }
        switch (api) {
        case 'navigateTo':
          uni.navigateTo(callback)
          break
        case 'redirectTo':
          uni.redirectTo(callback)
          break
        case 'reLaunch':
          uni.reLaunch(callback)
          break
        case 'switchTab':
          uni.switchTab(callback)
          break
        default:
          uni.navigateTo(callback)
        }
      }
    }
  };
</script>

<style lang="scss">
	$uni-font-size-sm:12px;
	$uni-font-size-base:14px;
	$uni-font-size-lg:16px;
	$uni-spacing-col-lg: 12px;
	$uni-spacing-row-lg: 15px;
	$uni-img-size-sm:20px;
	$uni-img-size-base:26px;
	$uni-img-size-lg:40px;
	$uni-border-color:#e5e5e5;
	$uni-bg-color-hover:#f1f1f1;
	$uni-text-color-grey:#999;
	$list-item-pd: $uni-spacing-col-lg $uni-spacing-row-lg;
	.uni-list-item {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		font-size: $uni-font-size-lg;
		position: relative;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		flex-direction: row;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
	.uni-list-item--disabled {
		opacity: 0.3;
	}
	.uni-list-item--hover {
		background-color: $uni-bg-color-hover;
	}
	.uni-list-item__container {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: $list-item-pd;
		padding-left: $uni-spacing-row-lg;
		flex: 1;
		overflow: hidden;
		// align-items: center;
	}
	.container--right {
		padding-right: 0;
	}
	// .border--left {
	// 	margin-left: $uni-spacing-row-lg;
	// }
	.uni-list--border {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		/* #ifdef APP-NVUE */
		border-top-color: $uni-border-color;
		border-top-style: solid;
		border-top-width: 0.5px;
		/* #endif */
	}
	/* #ifndef APP-NVUE */
	.uni-list--border:after {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: $uni-border-color;
	}
	/* #endif */
	.uni-list-item__content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding-right: 8px;
		flex: 1;
		color: #3b4144;
		// overflow: hidden;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;
	}
	.uni-list-item__content--center {
		justify-content: center;
	}
	.uni-list-item__content-title {
		//kate 手动设置抽屉子标题字体大小
		//font-size: $uni-font-size-base;
		font-size: 18px;
		color: #3b4144;
		overflow: hidden;
	}
	.uni-list-item__content-note {
		margin-top: 6rpx;
		color: $uni-text-color-grey;
		font-size: $uni-font-size-sm;
		overflow: hidden;
	}
	.uni-list-item__extra {
		// width: 25%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}
	.uni-list-item__header {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
	}
	.uni-list-item__icon {
		margin-right: 18rpx;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.uni-list-item__icon-img {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		height: $uni-img-size-base;
		width: $uni-img-size-base;
		margin-right: 10px;
	}
	.uni-icon-wrapper {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		padding: 0 10px;
	}
	.flex--direction {
		flex-direction: column;
		/* #ifndef APP-NVUE */
		align-items: initial;
		/* #endif */
	}
	.flex--justify {
		/* #ifndef APP-NVUE */
		justify-content: initial;
		/* #endif */
	}
	.uni-list--lg {
		height: $uni-img-size-lg;
		width: $uni-img-size-lg;
	}
	.uni-list--base {
		height: $uni-img-size-base;
		width: $uni-img-size-base;
	}
	.uni-list--sm {
		height: $uni-img-size-sm;
		width: $uni-img-size-sm;
	}
	.uni-list-item__extra-text {
		color: $uni-text-color-grey;
		font-size: $uni-font-size-sm;
	}
	.uni-ellipsis-1 {
		/* #ifndef APP-NVUE */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 1;
		text-overflow:ellipsis;
		/* #endif */
	}
	.uni-ellipsis-2 {
		/* #ifndef APP-NVUE */
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 2;
		text-overflow:ellipsis;
		/* #endif */
	}
</style>
